import {NavBar,Icon,SearchBar,WhiteSpace,Button,Toast} from 'antd-mobile'
import {useState ,useEffect} from 'react'
import {connect} from 'react-redux'

import {Spin} from 'antd'
import {search_friend} from '../../../../../network/freind'
import './addfriend.css'

const ADD = ({history,usr,wsurl})=>{
    console.log(wsurl);
    const [value,setvalue] = useState('')
    const [friendlist,setfriendlist] = useState([])
    const [loading,setloading] = useState(false)
    const [isapplying,setisapplying] = useState([])
    const [websocket,setwebsocket] = useState(new WebSocket(wsurl))

    useEffect(()=>{
        websocket.onopen = function() {
            console.log("连接成功");
        }

        websocket.onclose = function() {
            console.log("退出连接");
        }

        websocket.onmessage = function(event) {

            console.log(event.data);
            let obj = JSON.parse(event.data);
        }

        return ()=>{
            websocket.close();
        }
    },[]) 




    const on_search = (key) =>{
        setvalue(key)
        const get_friend = async()=>{
            setloading(true)
            const res = await search_friend(key)
            setfriendlist(res.data)
            setloading(false)
            setisapplying(new Array(res.data.length).fill(false))
        }
        get_friend()
        console.log(friendlist);
    }
    const on_change = (key) =>{
        setvalue(key)
    }
    const on_clear = () =>{
        setvalue('')
        setfriendlist([])
        setisapplying([])
    }

    const send_friend_apply =(name,index) =>{
        if(name.username === usr){
            Toast.fail('不能添加自己！',1) 
            return
        }
        setisapplying((isapplying)=>{
            isapplying[index] = true
            return [...isapplying]
        })
        
        const send_obj = {
            'from' : usr,
            'to' : name.username,
            'type' : 2,
            'data':null,
        }

        let res = websocket.send(JSON.stringify(send_obj));
    

        setisapplying((isapplying)=>{
            isapplying[index] = false
            return [...isapplying]
        })

    }

    return <div className="add">
        <NavBar
            mode="dark"
            icon={<Icon type="left" />}
            onLeftClick={() => {history.goBack()}}           
            >
        添加朋友
      </NavBar>
      <SearchBar 
            value = {value}
            placeholder="搜索" 
            maxLength={10} 
            onSubmit = {value=>on_search(value)}
            onChange = {value=>on_change(value)}
            onClear={value => on_clear(value)}
         
            />
            <div className="search_friend">
                <Spin spinning={loading}>
                {friendlist.length === 0 ? <div className="wait">请输入用户名</div>:
                <div className="friend_list">
                    <WhiteSpace></WhiteSpace>
                    {friendlist.map((item,index)=>{
                        return (<div key={item.username} className='friend_item'>
                            <div className="friend_item_avatar"><img src={item.avatar}/></div>
                            <div className="friend_item_name_button">
                                <div className="friend_username">{item.username}</div>
                                <div className="friend_aplly"><Button  type="primary" style={{width:'50px',height:'50px'}} loading={isapplying[index]} onClick={()=>{send_friend_apply(item,index)}}>+</Button></div>
                            </div>
                        </div>)
                    })}
                </div>
                }
                </Spin>
            </div>
    </div>
}


const mapState2Props = (state) =>({
    usr : state.getIn(['login','usr']),
    wsurl : state.getIn(['login','ws_url'])
    
})

const mapDisPatch2Props ={

}



export default connect(mapState2Props,mapDisPatch2Props)(ADD)